<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>社团申请</title>
    <script src="js/jquery-3.7.0.min.js"></script>
    <script src="js/bootstrap.bundle.min.js"></script> <!-- 确保使用 bootstrap.bundle.min.js 包含 Popper.js -->
    <script src="js/vue.min.js"></script>
    <script src="js/util.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet">
    <link rel="stylesheet" href="css/bootstrap.css">
</head>
<style type="text/css">
    .clubSystem {
        width: 1100px;
        margin: auto;
    }
    .clubSystemHead > div:first-child {
        font-size: 20px;
        font-weight: bold;
        line-height: 50px;
    }
    /*去浮动*/
    .clear:after {
        content: "";
        display: block;
        clear: both;
    }

    .pagination li {
        list-style-type: none;
        display: inline-block;
        margin-right: 5px;
    }
    .pagination button {
        border: none;
        background-color: #f8f9fa;
        color: #007bff;
        padding: 5px 10px;
        cursor: pointer;
    }
    .pagination button:hover {
        background-color: #e9ecef;
    }
    .pagination .active button {
        background-color: #007bff;
        color: white;
    }
    .pagination .disabled button {
        background-color: #e9ecef;
        color: #6c757d;
        cursor: not-allowed;
    }

    .studentCss {
        display: flex;
        align-items: center;
        margin-bottom: 10px;
    }
    .studentCss img {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        margin-right: 10px;
    }

    .studentRole {
        font-size: 14px;
        color: gray;
    }
    .studentActions {
        margin-left: 600px;
    }
</style>
<body>
<div class="clubSystem" id="clubSys">
    <div class="clubSystemHead clear" style="height: 50px;">
        <div>社团审批</div>
    </div>

    <input type="radio" class="btn-check" name="clubType" id="option1" autocomplete="off" checked value="1" v-model="selectedActionType">
    <label class="btn btn-outline-danger" for="option1">加入</label>

    <input type="radio" class="btn-check" name="clubType" id="option2" autocomplete="off" value="2" v-model="selectedActionType">
    <label class="btn btn-outline-danger" for="option2">退出</label>

    <div v-for="(student, index) in paginatedStudents" :key="index" class="studentCss clear">
        <div>
            <img :src="'img/head/'+student.head">
        </div>
        <div class="studentInfo">
            <div>{{ student.studentName }}</div>
            <div class="studentRole">活动分：{{student.activityScore}}</div>
        </div>
        <div class="studentActions">
            <button @click="approveRequest(student.clubMembershipRequests.requestId)">同意</button>
            <button @click="rejectRequest(student.clubMembershipRequests.requestId)">拒绝</button>
        </div>
    </div>
    <ul class="pagination">
        <li :class="{ disabled: currentPage === 1 }">
            <button @click="changePage(currentPage - 1)" :disabled="currentPage === 1">上一页</button>
        </li>
        <li v-for="page in totalPages" :key="page" :class="{ active: currentPage === page }">
            <button @click="changePage(page)">{{ page }}</button>
        </li>
        <li :class="{ disabled: currentPage === totalPages }">
            <button @click="changePage(currentPage + 1)" :disabled="currentPage === totalPages">下一页</button>
        </li>
    </ul>
</div>
</body>
<script>
    $(function (){
        let clubId = getData().clubId;
        function LoginVerify() {
            return new Promise((resolve, reject) => {
                $.ajax({
                    url: "loginVerify",
                    type: "get",
                    dataType: "json",
                    success: function(response) {
                        if (response.state == 300) {
                            alert(response.message);
                            window.location.href = "login.html";
                        } else {
                            resolve(response.data.loginUser);
                        }
                    },
                    error: function(xhr, status, error) {
                        reject(error);
                    }
                });
            });
        }

        function setMan(role,studentId){
            $.ajax({
                url:"setMan/"+role+"/"+clubId+"/"+studentId,
                type:"post",
                success:function (){
                    console.log("成功")
                }
            })
        }

        let app = new Vue({
            el: "#clubSys",
            data: {
                students: [],
                selectedActionType: '1',
                itemsPerPage: 5,
                currentPage: 1
            },
            computed: {
                filteredStudents() {
                    return this.students.filter(student => student.clubMembershipRequests.actionType.toString() === this.selectedActionType);
                },
                totalPages() {
                    return Math.ceil(this.filteredStudents.length / this.itemsPerPage);
                },
                paginatedStudents() {
                    const start = (this.currentPage - 1) * this.itemsPerPage;
                    const end = start + this.itemsPerPage;
                    return this.filteredStudents.slice(start, end);
                }
            },
            methods: {
                changePage(page) {
                    if (page >= 1 && page <= this.totalPages) {
                        this.currentPage = page;
                    }
                },
                approveRequest(requestId) {
                    // Implement approval logic here
                    console.log('Approve request:', requestId);
                    $.ajax({
                        url:"approve/"+requestId,
                        type:"post",
                        success:function (){
                            console.log("同意")
                        }
                    })
                    window.alert("操作成功")
                    location.reload();
                },
                rejectRequest(requestId) {
                    // Implement rejection logic here
                    console.log('Reject request:', requestId);
                    $.ajax({
                        url:"reject/"+requestId,
                        type:"post",
                        success:function (){
                            console.log("拒绝")
                        }
                    })
                    window.alert("操作成功")
                    location.reload();
                },
                getRoleName(role) {
                    switch (role) {
                        case 1:
                            return '管理员';
                        case 2:
                            return '成员';
                        default:
                            return '无角色';
                    }
                }
            },
            created() {
                $.ajax({
                    url: "requestAll/" + clubId,
                    type: "get",
                    dataType: "json",
                    success: (req) => {
                        console.log(req)
                        this.students = req.map(item => ({
                            ...item.student,
                            clubMembershipRequests: item.clubMembershipRequests
                        }));
                    }
                });
            }
        })
    })
</script>
</html>